<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用js创建一个按钮</title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	"use strict";
	class Button{
		constructor(text,clickCallback) {
		    this.text = text;
			this.element = document.createElement("button");
			this.element.innerText = this.text;
			if(clickCallback && typeof(clickCallback)=='function'){
				this.element.addEventListener('click',clickCallback);
			}
			//设置样式
			this.initCss("backgroundColor","#4e6ef2");
			this.initCss("color","#ffffff");
			this.initCss("border","0px")
			this.initCss("height","40px");
			this.initCss("lineHeight","40px");
			this.initCss("fontSize","17px");
			this.initCss("font","微软雅黑");
			this.initCss("width","112px");
			this.initCss("cursor","pointer");
			this.element.onmouseover=function(){
				this.style.backgroundColor="#4662D9";
			}
			this.element.onmouseout=function(){
				this.style.backgroundColor="#4e6ef2";
			}
		}
		initCss(attr,val){
			this.element.style[attr]=val;
		}
		
		toString(){
			return "-1";
		}
		
		getElement(){
			return this.element;
		}
	}
	
	var btn = new Button("按钮",()=>{
		alert("按钮被点击了")
	})
	document.body.appendChild(btn.getElement())
	
	 class ArrayList extends Array{
		 constructor() {
		    super()
		 }
	 }
</script>
